<template>
  <el-dialog draggable overflow v-model="visible" :title="titleMap[mode]" :width="500" destroy-on-close
    @closed="$emit('closed')">
    <el-form :model="form" :rules="rules" ref="dialogForm" label-width="70px">
      <sk-tabs type="border-card">
        <el-tab-pane ref="tab" label="基础信息">
          <el-row>
            <el-col :span="12">
              <el-form-item label="入账日期" prop="billdate" class="red">
                <el-input v-model="form.billdate"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="名称" prop="name">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="编号" prop="code">
                <el-input v-model="form.code" readonly placeholder="自动生成" class="readonly"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="产品" prop="material_id" class="blue">
                <skAutoChoose v-model="form.material.name" :name="'material'" :params="[{ 'material_nature_id': 3 }]"
                  :assign="form">
                </skAutoChoose>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供应商" prop="company_id" class="blue">
                <skAutoChoose v-model="form.company.name" :name="'factory'" :asKey="'company_id'" :assign="form">
                </skAutoChoose>

              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="摘要" prop="summary" class="blue">
                <el-input v-model="form.summary"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="原值" prop="amount" class="blue">
                <el-input v-model="form.amount"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="累计折旧" prop="accumulated_depreciation" class="blue">
                <el-input v-model="form.accumulated_depreciation" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="残值率" prop="residual_rate" class="blue">
                <el-input v-model="form.residual_rate"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="残值" prop="residual" class="blue">
                <el-input v-model="residual_com" disabled></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="使用部门" prop="department_id">
                <skAutoChoose :name="'financeDepartment'" v-model="form.department.name" :assign="form"
                  :asKey="'department_id'" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="增加方式" prop="add_method_id">
                <skDicSelect v-model="form.add_method_id" :valueEqKey="false" :code="'FinanceFixedAddMethod'">
                </skDicSelect>
              </el-form-item>
            </el-col>
          </el-row>

        </el-tab-pane>
        <el-tab-pane ref="tab" label="折旧信息">
          <el-row>

            <el-col :span="14">

              <el-form-item label="折旧方法" prop="depreciation_method_id" class="blue">
                <skDicSelect v-model="form.depreciation_method_id" :valueEqKey="false"
                  :code="'FinanceDepreciationMethod'">
                </skDicSelect>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="折旧期数" prop="depreciation_count" class="blue">
                <el-input v-model="form.depreciation_count"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="折旧期额" prop="depreciation_amount" class="blue">
                <el-input v-model="depreciation_amount_com" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="折旧日期" prop="depreciation_date" class="blue">
                <el-date-picker v-model="form.depreciation_date" type="date" />
              </el-form-item>
            </el-col>

            <el-col :span="14">
              <el-form-item label="折旧科目" prop="depreciation_subject_id">
                <skAutoChoose :name="'subject'" :asKey="'depreciation_subject_id'" :assign="form"
                  v-model="form.depreciation_subject.name" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="科目编码" prop="depreciation_subject_id">
                <el-input v-model="form.depreciation_subject_id" disabled></el-input>
              </el-form-item>
            </el-col>

          </el-row>
        </el-tab-pane>
      </sk-tabs>
    </el-form>
    <!-- </sc-water-mark> -->
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
    </template>
  </el-dialog>
</template>

<script>
import skAutoChoose from "@/components/skAutoChoose";
import skDicSelect from "@/components/skDicSelect";
import XEUtils from "xe-utils";
export default {
  emits: ["success", "closed"],
  components: { skAutoChoose, skDicSelect },
  data() {
    return {
      mode: "add",

      titleMap: {
        add: "新增",
        edit: "编辑",
      },

      form: {
        company: {},
        material: {},
        department: {},
        depreciation_subject: {},
        add_method_id: 2202,
        depreciation_method_id: 1,
        depreciation_count: 36,
        residual_rate: 5,
        accumulated_depreciation: 0,
        billdate: XEUtils.toDateString(new Date(), "yyyy-MM-dd"),
        depreciation_date: XEUtils.toDateString(new Date(), "yyyy-MM-dd"),
      },
      rules: {
        billdate: { required: true, message: "请选择单据日期" },
        name: { required: true, message: "请填写名称" },
        material_id: { required: true, message: "请选择产品" },
        company_id: { required: true, message: "请选择供应商" },
        amount: { required: true, message: "请填写原值金额" },
        department_id: { required: true, message: "请选择使用部门" },
        depreciation_date: { required: true, message: "请选择折旧日期" },
        depreciation_method_id: { required: true, message: "请选择折旧方法" },
        depreciation_count: { required: true, message: "请填写折旧期数" },
        depreciation_subject_id: { required: true, message: "请选择折旧科目" },
      },
      visible: false,
      isSaveing: false,

    };
  },
  computed: {
    residual_com() {
      let r = (this.form.amount * this.form.residual_rate / 100);
      return Number.isNaN(r) ? 0 : r.toFixed(2);
    },
    depreciation_amount_com() {
      let r = ((this.form.amount - this.form.accumulated_depreciation) / this.form.depreciation_count);
      return Number.isNaN(r) ? 0 : r.toFixed(2);
    }
  },
  mounted() {

  },
  methods: {

    //显示
    open(mode = "add") {
      this.mode = mode;

      this.visible = true;

      return this;
    },
    //表单提交方法
    submit() {

      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true;
          this.form.residual = this.residual_com;
          this.form.depreciation_amount = this.depreciation_amount_com;
          var res = await this.$API.finance.fixedAsset.save.post(this.form);
          this.isSaveing = false;
          if (res.code == 200) {
            this.$emit("success", this.form, this.mode);
            this.visible = false;
            this.$message.success("操作成功");
          }
        }
      });


    },
    //表单注入数据
    async setData(data) {
      this.form = data;
    },
  },
};
</script>
<style></style>
